<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sweet Pages: A jQuery Pagination Solution | Tutorialzine demo</title>


<style type ="text/css">
@import url(member/css/home_styles.css);
@import url(member/css/nav_menu.css);
@import url(member/css/jqtransform.css);
@import url(member/css/buttonstyle.css);
@import url(member/css/dropdown.css);

html {

scrollbar-base-color: #9999cc;

scrollbar-arrow-color: white;

scrollbar-track-color: #ccccff;

scrollbar-shadow-color: black;

scrollbar-lightshadow-color: black;

scrollbar-darkshadow-color: gray;

scrollbar-highlight-color: white;

scrollbar-3dlight-color: black;

}
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="member/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="member/js/jquery.min.js"></script>
<script type="text/javascript" src="member/js/script.js"></script>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<script type="text/javascript" src="member/js/jquery"></script>
<script type="text/javascript" src="member/js/jquery.jqtransform.js"></script>


<script type="text/javascript">
    $(document).ready(function(){ 
    $("form.jqtransform").jqTransform();
   $('a.others').click(function(){
            var choice = $(this).parent().next().val();
             $('#panel').html('');
             $('body').load('${pageContext.request.contextPath}/member_getotheractivities',{formType : "delete", memberSelected : choice},function(){
                        
                });
        });
        
        });
</script>


</head>

<body>

<h1>SPRINT<br/> 
Membership Management System
</h1>



<div style="margin: auto; width: 1000px; height: 1000px;">
        
        <!-- left panel -->
        <div id="main2" style="float: left; width: 166px;">
        <ul id="navigationMenu" style="float: right;">
            <li>
                    <a class="home" id="home" href="member_showprofile">
                    <span>My Profile</span>
                </a>
            </li>

            <li>
                <a class="about" id="members" href="#">
                    <span>My Activities</span>
                </a>
            </li>

            <li>
                    <a class="services" id="eca" href="member_showall">
                    <span>Manage ECA</span>
                </a>
            </li>
        </ul>
        </div>
        <!-- left panel -->
        
        <!-- right panel -->
	<div id="main">
            <div id="member_title" style="text-align:center; color: #616161; font-size: 35px; text-decoration: underline; font-family: Garamond;"> My Activities</div> 
            <br/>
            <a href="logout" id ="logout" class="button square red effect-2" style="color: #FFFFFF; margin-left: 420px; ">LOG OUT</a>
            
            <div id="holder_title"></div>            
            <!-- black panel for info -->
`
            <div id="holder">
                <c:forEach var="eca" items="${userList}">
                        <li style="overflow: scroll"> <br/>${eca.name}<br/>${eca.date}<br/>${eca.time}<br/> Points ${eca.points}<br/>${eca.status}</li>    
                </c:forEach>
            </div>
                        <!-- black panel for info -->
            <!-- functional options -->
            <div id="options">
		<div class="button-row">
                        
                

                </div>
            </div>
            <br>
            <div id="member_title" style="text-align:center; color: #616161; font-size: 35px; text-decoration: underline; font-family: Garamond;">Other Member's Activities</div> 
          
            <ul id="drop">
                <li><a href="#" class="drop">Other Members</a>
                    <div class="dropdown_1column align_right">
                        <div class="col_1">
                            <ul class="greybox" >
                                <c:forEach var="member" items="${memberList}">
                                    <li ><a class="others" href="#" id="${member.memberid}">${member.fullname}</a></li>    
                               <input name ="${member.memberid}" value ="${member.memberid}" type="hidden">
                                </c:forEach>
                               
                            </ul>   
                        </div>
                    </div>
                </li>
            </ul>
            <!-- functional options -->          
            <div id ="panel">
                <c:forEach var="acts" items="${allList}">
                    <li style="color: black; font-family: Consolas; font-size: 17px; margin-top: 10px; margin-left: 30px;"> <b>${acts.name}</b>   ${acts.date}   ${acts.time}   ${acts.points}   ${acts.status} </li>
                </c:forEach>
                
            </div>   
                
	</div>
        <!-- right panel -->
</div>


</body>
</html>
